/* 自定义webpack打包规则 */
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
    /* 
设置环境模式
    获取环境变量 process.env.NODE_EVN
    production生产环境：打包后的JS会自动压缩、NODE_EVN=“production”
    development开发环境：代码不会压缩、NODE_EVN="development"
*/
    mode: 'production',
    /* 指定入口[相对地址] */
    entry: './src/index.js',
    /* 指定出口 */
    output: {
        //打包后文件的名字
        //[hash]/[hash:8]:为打包后的文件创建哈希名
        // + 代码一但被修改，生成的文件名中的哈希值也会变化
        // + 有助于强缓存的设置
        filename: 'main.[hash:8].js',
        //设置打包的路径[绝对路径]
        path: path.resolve(__dirname, './dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            //指定页面模版
            template: './public/index.html',
            //打包文件后的名字
            filename: 'index.html',
            //是否压缩
            minify: true
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'main.[hash:8].css'
        })
    ],
    /* DEV-SERVER */
    devServer: {
        host: '127.0.0.1',//域名
        port: 3000,//端口号
        open: true,//自动打开浏览器
        hot: true,//热更新
        compress: true,//开启服务器端端GZIP压缩
        /* 
            跨域代理
                "/xxx" 前缀：主要就是用来区分，以“什么前缀发的请求，我们代理到哪一台服务器上[一般设置为/api]”
                target:代理的真正服务器地址
                pathRewrite:地址重写，主要用于把用来区分不同代理的前缀，从最后请求的真正地址中移除掉
                changeOrigin:修改请求头中的origin源信息
                ws:支持webscoket通信机制
         */
        proxy: [
            {
                context: ['/jian'],
                target: 'https://www.jianshu.com/',
                changeOrigin: true,
                ws: true,
                pathRewrite: { '^/jian': '' }
            },
            {
                context: ['/zhi'],
                target: 'https://news-at.zhihu.com/api/4',
                changeOrigin: true,
                ws: true,
                pathRewrite: { '^/zhi': '' }
            }
        ]
    },
    module: {
        rules: [
            {
                test: /\.(css|less)$/,//基于正则匹配：哪些文件是我们需要处理的
                use: [
                    MiniCssExtractPlugin.loader,//把 css 以内嵌式导入到页面
                    "css-loader",//处理特殊语法
                    "postcss-loader",//配合 autoprefixer&browserlist给 css3 属性设置前缀[兼容]
                    "less-loader", //把less 编译为css
                ]

            },
            {
                test: /\.(css|scss)$/,//基于正则匹配：哪些文件是我们需要处理的
                use: [
                    MiniCssExtractPlugin.loader,//把 css 以内嵌式导入到页面
                    "css-loader",//处理特殊语法
                    "postcss-loader",//配合 autoprefixer&browserlist给 css3 属性设置前缀[兼容]
                    "sass-loader", //把sass 编译为css
                ]

            },
            {
                test: /\.js$/,
                use: [
                    "babel-loader"
                ],
                //=>设置编译时忽略的文件和指定编译目录
                // include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                type: 'javascript/auto',//webpack5需要的
                use: [{
                    //=>把指定大小内的图片BASE64
                    //=>不在指定范围的采用file-loader进行处理
                    loader: 'url-loader',
                    options: {
                        limit: 200 * 1024,
                        esModule: false,
                        //编译后，没有BASE64图片，编译输出的路径和名称
                        name: 'images/[name].[hash:8].[ext]'
                    }
                }],
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    },
    //=>设置优化项
    optimization: {
        //=>设置压缩方式
        minimizer: [
            //=>压缩CSS（但是必须指定JS的压缩方式）
            new CssMinimizerWebpackPlugin(), //压缩css
            //=>压缩JS
            //new UglifyjsWebpackPlugin({
            //cache: true, //=>是否使用缓存
            //parallel: true, //=>是否是并发编译
            //sourceMap: true, //=>启动源码映射（方便调试）
            //}),
            new TerserPlugin() //压缩js
        ]
    },
    //设置打包的最大资源大小
    performance: {
        maxAssetSize: 100 * 1024 * 1024,
        maxEntrypointSize: 100 * 1024 * 1024
    },
    /* 解析器 */
    resolve: {
        alias: {
            //@以后代表的就是src这个路径
            '@': path.resolve(__dirname, './src')
        }
    }
}
/* 
浏览器兼容处理
    设置browserslist[浏览器兼容列表]
        http://github.com/browserslist
    @1 考虑 css3 样式的兼容问题
        postcss-loader & autoprefixer
        根据browserslist，自动给 css3 加相关的前缀
    @2 考虑 JS 的兼容性
        ES6 + 语法兼容
        yarn add babel babel-loader @babel/preset-env @babel/core -D
        ES6 + 内置 API 兼容,上述操作处理不了，需要导入@babel/polyfill[对常见的内置API进行了重写]
            不是所有API都重写了，例如：fetch/Reflect等就没有重写！！
*/